<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="Saltarelle" %>
<%@ Import Namespace="Saltarelle.UI" %>
<%@ Import Namespace="Saltarelle.Mvc" %>
<%@ Import Namespace="DemoWeb" %>
<%@ Import Namespace="System.Globalization" %>

<script runat="server">
private Grid[] controls;

private const int NumGrids = 6;
private const int NumRows = 100;

protected override void OnLoad(EventArgs e) {
	base.OnLoad(e);
	
	controls = new Grid[NumGrids];
	for (int i = 0; i < NumGrids; i++) {
		controls[i] = new Grid() { Id = "grid" + i.ToString(CultureInfo.InvariantCulture), ColTitles = new string[] { "Col 1", "Col 2", "Col 3", "Col 4" }, Width = 420, Height = 150 };
		for (int j = 0; j < NumRows; j++) {
			string prefix = "Cell " + j.ToString(CultureInfo.InvariantCulture) + ", ";
			controls[i].AddItem(new[] { prefix + "1", prefix + "2", prefix + "3", prefix + "4" }, j);
		}
	}
	
	controls[1].ColHeadersVisible = false;
	controls[1].DragDropMode      = GridDragDropMode.localMove;
	controls[2].DragDropMode      = GridDragDropMode.localCopy;
	controls[3].DragDropMode      = GridDragDropMode.globalMove;
	controls[4].DragDropMode      = GridDragDropMode.globalCopy;
	controls[5].DragDropMode      = GridDragDropMode.localMoveGlobalCopy;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grid Tests</title>
	<link rel="Stylesheet" href="/Content/themes/base/ui.all.css" type="text/css"/>
	<link rel="Stylesheet" href="/Content/site.css" type="text/css"/>
	<link rel="Stylesheet" href="/Stylesheet" type="text/css"/>
<% Html.Scripts(); %>
<style type="text/css">
.MessageLog span {
	display: block;
}
</style>
<script type="text/javascript" language="javascript">
var controls;

function logEvent(ctl, msg) {
	var events = $('#events');
	$('<div/>').text(ctl.get_id() + ': ' + msg).appendTo(events);
	events.scrollTop(100000);
}

function keyPressEventHandler(s, e) {
	logEvent(s, 'KeyPress, code = ' + e.keyCode);
}

function selectionChangingEventHandler(s, e) {
	logEvent(s, 'SelectionChanging, old = ' + s.getData(e.oldSelectionIndex) + ', new = ' + s.getData(e.newSelectionIndex));
}

function selectionChangedEventHandler(s, e) {
	logEvent(s, 'SelectionChanged, new = ' + s.getData(s.get_selectedRowIndex()));
}

function cellClickedEventHandler(s, e) {
	logEvent(s, 'CellClicked, (' + s.getData(e.row) + ', ' + e.col + ')');
}

function canRowBeDragged(s, e) {
	logEvent(s, 'CanRowBeDragged, row = ' + e.rowIndex);
	e.allow = $('#allowdrag').is(':checked');
}

function handleQueryDrop(s, e) {
	logEvent(s, 'QueryDrop, draggedRow = ' + e.draggedRowIndex + ', target = ' + e.target.get_id() + ', targetData = ' + e.targetData);
	return $('#sourceallowsdrop').is(':checked');
}

function handleDragDropCompleted(s, e) {
	logEvent(s, 'DragDropCompleted, draggedRowIndex = ' + e.draggedRowIndex + ', target = ' + e.target.get_id() + ', targetData = ' + e.targetData);
	if ($('#deletewhendropped').is(':checked')) {
		var offset = (s === e.target && e.targetData < e.draggedRowIndex) ? 1 : 0;
		s.deleteItem(e.draggedRowIndex + offset);
	}
}

function handleDrop(s, e) {
	logEvent(s, 'Drop, source = ' + e.source.get_id() + ', sourceData = ' + e.sourceData + ', dropIndex = ' + e.dropIndex);

	var data = e.source.getData(e.sourceData), texts = e.source.getTexts(e.sourceData), cls = e.source.getRowClass(e.sourceData);
	s.insertItem(e.dropIndex, texts, data);
	s.setRowClass(e.dropIndex, cls);
	s.set_selectedRowIndex(e.dropIndex);
}

function init() {
	var cfg = <%= Utils.InitScript(controls.Select(g => g.ConfigObject)) %>;
	controls = new Array(cfg.length);
	for (var i = 0; i < cfg.length; i++) {
		var c = new Saltarelle.UI.Grid(cfg[i]);
		c.add_keyPress(keyPressEventHandler);
		c.add_selectionChanging(selectionChangingEventHandler);
		c.add_cellClicked(cellClickedEventHandler);
		c.add_selectionChanged(selectionChangedEventHandler);
		c.add_canRowBeDragged(canRowBeDragged);
		c.add_handleQueryDrop(handleQueryDrop);
		c.add_handleDrop(handleDrop);
		c.add_handleDragDropCompleted(handleDragDropCompleted);
		controls[i] = c;
	}
	
	$('#verifyDataButton').click(function() {
		for (var i = 0; i < controls.length; i++) {
			var numRows = controls[i].get_numRows();
			for (var j = 0; j < numRows; j++) {
				var data = controls[i].getData(j), cellTexts = controls[i].getTexts(j);
				var match = /^Cell ([0-9]+)\,.*/.exec(cellTexts[0]);
				if (parseInt(match[1]) != data) {
					alert('Expected ' + match[1] + ', got ' + data);
					break;
				}
			}
		}
	});	

	$('#evalScriptButton').click(function() {
		eval($('#scriptInput').val());
	});
	
	$('#clearEventsButton').click(function() {
		$('#events').html('');
	});
}
</script>
</head>

<body style="margin: 20px">
	<table>
		<tr>
			<td>
				<%= controls[0].Html %>
			</td>
			<td>
				<%= controls[1].Html %>
			</td>
			<td rowspan="3">
				<div>
					<input type="text" style="width: 300px" id="scriptInput"/><button type="button" id="evalScriptButton">Eval</button>
				</div>
				<button type="button" id="clearEventsButton">Clear</button>
				<button type="button" id="verifyDataButton">Verify Data</button><br />
				<div style="width: 600px; height: 600px; overflow: scroll" id="events">
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<%= controls[2].Html %>
			</td>
			<td>
				<%= controls[3].Html %>
			</td>
		</tr>
		<tr>
			<td>
				<%= controls[4].Html %>
			</td>
			<td>
				<%= controls[5].Html %>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="checkbox" id="allowdrag" checked="checked" /><label for="allowdrag" style="margin-right: 20px">Allow drag</label>
				<input type="checkbox" id="sourceallowsdrop" checked="checked" /><label for="sourceallowsdrop" style="margin-right: 20px">Source allows drop</label>
				<input type="checkbox" id="deletewhendropped" checked="checked" /><label for="deletewhendropped" style="margin-right: 20px">Delete orig when dropped</label>
			</td>
		</tr>
	</table>
</body>
</html>
